<template>
    <view class="price">
        <view class="record_navigation">
            <view class="record_navigation_son">
                <view @tap="urlTo('/pages/personalCenter/record')">成交记录</view>
                <view class="record_org">卖家售价</view>
                <view @tap="urlTo('/pages/personalCenter/offer')">买家出价</view>
            </view>
        </view>
        <view class="record_table">
            <view class="offer_tab">
                <view>尺码</view>
                <view>买家出价</view>
            </view>
            <!--暂无数据显示-->
            <placeholder wx:if="{{is_empty}}" message.sync="暂无发现数据"></placeholder>
            <view class="offer_for" wx:if="{{!is_empty}}"  wx:for="{{List}}" wx:key="item">
                <view class="offer_th">
                    <view>{{item.size}}</view>
                    <view>{{item.amount}}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import tip from '@/utils/tip'
    import { GOODSDETAIL } from '@/utils/constant'
    import Placeholder from "../../components/common/placeholder"
    export default class price extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '卖家售价',    // 头部标题
        }

        components = {
            placeholder: Placeholder
        }

        data = {
            List:[],
            form:{
                page:1,
                limit:10
            },
            page_total:'',
            is_empty:false
        };

        methods = { // 方法
            urlTo(url){
                const t = this;
                wx.redirectTo({
                    url:url+'?id=' + t.form['params[goodsId]']
                })
            }
        };

        onLoad() {
            const t = this;
            let detail = wx.getStorageSync(GOODSDETAIL);
            if(detail){
                t.form['params[goodsId]'] = detail.id;
            }
            t.form['params[size]'] = detail.size;
            t.getChildCate();
        }
        events = {};
        async getChildCate(type) {
            const t = this;
            const a = await api.goodsSearchSellerOffer({
                query:t.form
            });
            if (a.data.code == 0) {
                t.page_total = Math.ceil(a.data.data.total/t.form['limit']);
                t.form['page'] = a.data.data.page;
                if(type){
                    t.List = [...t.List, ...a.data.data.rows];
                }else {
                    t.List = a.data.data.rows;
                }
                if (!t.List || t.List[0] == null || t.List.length == 0) {
                    t.is_empty = true;
                }else {
                    t.is_empty = false;
                }
                t.$apply();
            } else {
                tip.error(a.data.msg);
            }
        }
        //加载更多
        onReachBottom() {
            let that = this;
            that.showLoading = true;
            if (that.page_total > that.form['page']) {
                that.form['page']++;
                that.getChildCate(1);
            } else {
                that.showLoading = false;
            }
        }
    }

</script>
<style lang="less">
    .price{
        .record_navigation{
            background: #fff;
            padding:40rpx 0;
            .record_navigation_son{
                width: 600rpx;
                margin: 0 auto;
                border:1px solid orange;
                view{
                    display: table-cell;
                    color: orange;
                    text-align: center;
                    width: 200rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                }
                .record_org{
                    background:orange;
                    color: #fff;
                }
            }
        }
        .record_table{
            background: #fff;
            .offer_tab{
                display: flex;
                view{
                    border-bottom: 1px solid #ddd;
                    border-top: 1px solid #ddd;
                    width: 50%;
                    padding-left: 20rpx;
                    height: 80rpx;
                    line-height:80rpx
                }
                view:first-child{
                    color: #666;
                }
                view:last-child{
                    color: #333;
                    background: #eee;
                }
            }
            .offer_for{
                .offer_th{
                    display: flex;
                    view{
                        border-bottom: 1px solid #ddd;
                        width: 50%;
                        padding-left: 20rpx;
                        height: 80rpx;
                        line-height:80rpx
                    }
                    view:first-child{
                        color: #666;
                    }
                    view:last-child{
                        color: #333;
                        background: #eee;
                    }
                }
            }
        }
         .empty-placeholder{
            height: 100vh;
        }
    }
</style>
